<template>
  <div class="main" v-if="client.CardTypes && client.CardTypes.length > 0">
    <div class="item" v-if="isShow('身份证')" @click="initDevice('身份证')">
      <div><i class="iconfont icon-xinyongka"></i></div>
      <div class="item-text">身份证</div>
    </div>
    <div class="item" v-if="isShow('居民医保卡')" @click="initDevice('居民医保卡')">
      <div><i class="iconfont icon-xinyongka"></i></div>
      <div class="item-text">居民医保卡</div>
    </div>
    <div class="item" v-if="isShow('职工医保卡')" @click="initDevice('职工医保卡')">
      <div><i class="iconfont icon-xinyongka"></i></div>
      <div class="item-text">职工医保卡</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import BaseMixin from '@/mixins/base'

@Component({
  name: 'Card'
})
export default class Card extends mixins(BaseMixin) {
  private async created () {
    this.client = this.store.state.client
    this.setTip('请选择您的就诊卡类型')
    this.setMaxTime(10)
    this.updateTimeHandler('back')
  }

  private isShow (name: string) {
    return this.client.CardTypes.findIndex(e => e.Name === name) >= 0
  }

  private async initDevice (deviceName: string) {
    switch (deviceName) {
      case '身份证':
        var result = await this.idCardReader.readCard()
        if (result && result.code === 200) {

        } else {
          this.showLoading('读取信息失败, 请稍后重试')
          setTimeout(() => {
            this.hideLoading()
            this.home()
          }, 3000)
        }
        break
      case '居民医保卡':
      case '职工医保卡':
        var result1 = await this.icCardReader.readCard()
        if (result1 && result1.code === 200) {

        } else {
          this.showLoading('读取信息失败, 请稍后重试')
          setTimeout(() => {
            this.hideLoading()
            this.home()
          }, 3000)
        }
        break
      default:
        this.showLoading('读取信息失败, 请稍后重试')
        setTimeout(() => {
          this.hideLoading()
          this.home()
        }, 3000)
        break
    }
  }
}

</script>

<style scoped>
  .main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    align-content: center;
  }
  .item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 40rem;
    height: 40rem;
    background-color: white;
    margin: 2rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 3rem;
  }
  .item-icon{
    font-size: 15rem;
  }
  .item-text{
    margin-top: 3rem;
  }
</style>
